<!--
 * @Author: your name
 * @Date: 2022-02-22 14:24:53
 * @LastEditTime: 2022-02-22 15:09:59
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \briup-study\day02\盒子模型2.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
/* w3c盒子，内容盒子 标准盒子 */
/* 盒子的宽/高：内容区的宽+左右border和左右的padding */
/* 所占页面的盒子的宽：内容区的宽+左右border和左右的padding+左右margin */

/* 边框盒子 怪异盒子 IE盒子 */
/* 边框盒子的宽：width=content的宽+borderLeft+borderRight+paddingLeft+paddingRight
100px=78px+2px+20px */
        div{
            /* w3c盒子 内容盒子 标准盒子 */
         /*    box-sizing: content-box; */
            /* 边框盒子 怪异盒子 IE盒子 
            边框盒子*/
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            margin: 10px;
            border: 1px solid #666;
            /*将div转换为行内快元素 */
            display: inline-block; 
           /*  /* 将div转换为行内元素 */
           /*  display: inline; */
            /*  将行内元素转换为块级元素 
            display: block; */ 
        }
    </style>
</head>
<body>
    <div>axuer</div>
    hello
</body>
</html>